<template>
    <el-dialog
        v-model="dialog"
        :title="info.title"
        center
        width="500px"
    >

        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item label="分类名称" prop="goodsName">
                <el-input v-model="formData.goodsName"></el-input>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-input v-model="formData.sort" type="number"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <div>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
                <el-button @click="close">取消</el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script lang="ts" setup>
    import {ref,reactive,defineProps,withDefaults,defineExpose,watch} from 'vue'
    import {ElForm} from 'element-plus'

    interface propsInterface {
        info: {
            formData: object,
            title: string
        },
        title: string
    }
    interface formDataInterface {
        goodsName: string,
        goodsId:  | '',
        sort: number | '',
    }

    const props = withDefaults(defineProps<propsInterface>(),{
        info: () => {
            return {
                title: '添加商品',
                formData: {}
            }
        }
    })

    watch([props.info.formData],() => {
        console.log('props.formData变化')
    },{
        deep: true
    })

    const rules = reactive({
        goodsName: [
            {required: true,message: '请选择轮播图',trigger: 'change'},
        ],
        goodsId: [
            {required: true,message: '请输入商品id',trigger: 'blur'},
        ],
        sort: [
            {required: true,message: '请输入排序值',trigger: 'blur'},
        ]
    })

    // formRef
    const formRef = ref<InstanceType<typeof ElForm>>();

    // 商品数据
    const formData:formDataInterface = reactive({
        goodsName: '',
        goodsId: '',
        sort: '',
    })

    const dialog = ref(false)
    const open = () => {
        dialog.value = true;
    }
    const close = () => {
        dialog.value = false
    }

    const handleConfirm = () => {
        formRef.value?.validate(valid => {
            if(!valid) return;
        })
    }

    defineExpose({
        open
    })
</script>


<style scoped>

</style>